<script>
import { mapActions, mapMutations } from 'vuex';
import BaseModule from '../base/BaseModule';
import App from '../app';

/*
 * 结果列表模块
 */
export default {
  name: 'FeatureListModule',
  title: '要素列表',
  icon: 'checkmark',
  position: 'bottom',
  order: 0,
  visible: true,
  mixins: [BaseModule],
  props: {
    //查询服务地址
    service: {
      type: String,
      default() {
        return '';
      },
    },
    //查询条件
    where: {
      type: String,
      default() {
        return '';
      },
    },
    //分页大小
    pageSize: {
      type: Number,
      default() {
        return 10;
      },
    },
  },
  data() {
    return {
      //表格列
      columns: [],
      //表格行
      data: [],
      //总记录行数
      total: 0,
      //分页控件是否已初始化
      pageInited: false,
      //数据是否在加载
      loading: false,
      //当前分页数据
      pagedData: [],
    };
  },
  watch: {
    service(newVal) {
      this.initQuery();
    },
    where(newVal) {
      this.initQuery();
    },
  },
  created() {
    this.initQuery();
    this.initEvents();
  },
  destroyed() {
    this.setMapGeoJson({ geojson: {}, type: 'once' });
  },
  methods: {
    ...mapActions({
      wfsQuery: 'MAP_WFS_QUERY',
    }),
    ...mapMutations({
      setMapGeoJson: 'SET_MAP_GEOJSON',
    }),
    //初始化查询
    initQuery() {
      this.pageInited = false;
      this.queryFeatures(1);
      this.setMapGeoJson({ geojson: {}, type: 'once' });
    },
    //初始化事件监听
    initEvents() {},
    //查询要素列表
    queryFeatures(pageIdx) {
      this.loading = true;
      let sqlWhere = this.where ? { cql_filter: this.where } : {};
      this.wfsQuery({
        url: this.service,
        pageIndex: pageIdx,
        pageSize: this.pageSize,
        options: sqlWhere,
      })
        .then(p => {
          this.loading = false;
          this.pagedData = p;
          this.columns = this.getTableColumns(p);
          this.data = this.getTableRows(p);
          if (!this.pageInited) {
            this.total = p.totalFeatures;
            this.pageInited = true;
          }
        })
        .catch(e => {
          this.loading = false;
          this.columns = [];
          this.data = [];
          this.total = 0;
          this.$Message.error('查询错误!');
        });
    },
    //获取表格列
    getTableColumns(data) {
      if (data.features.length == 0) {
        return [];
      }
      let cols = Object.keys(data.features[0].properties).map(p => {
        return { title: p, key: p };
      });
      return cols;
    },
    //获取数据行
    getTableRows(data) {
      let rows = data.features.map(p => {
        return {
          ...p.properties,
          id: p.id,
        };
      });
      return rows;
    },
    //定位到要素
    zoomToFeature(item) {
      let feature = this.pagedData.features.find(p => p.id == item.id);
      this.setMapGeoJson({ geojson: feature, type: 'once' });
    },
  },
};
</script>

<template>
  <div class="feature-list-wrapper">
    <Table
      :columns="columns"
      :data="data"
      :loading="loading"
      height="167"
      size="small"
      highlight-row
      border
      @on-current-change="zoomToFeature">
    </Table>
    <div class="feature-table-page">
      <Page
        :total="total"
        size="small"
        show-total
        @on-change="queryFeatures">
      </Page>
    </div>
  </div>
</template>

<style lang="less">
.feature-list-wrapper {
  .k-table-wrapper {
    border: 1px solid #555555;
  }
  .k-table,
  .k-table:before {
    background: transparent;
  }
  .k-table-body {
    overflow-x: hidden !important;
  }
  .k-table-cell {
    white-space: nowrap;
  }
  .k-table-small td {
    height: 30px;
    background-color: #252526;
    color: #ffffff;
    border-bottom: 1px solid #333333;
    border-right: 1px solid #333333;
  }
  .k-table-border th {
    background-color: #292525;
    background-image: none,
      linear-gradient(
        to bottom,
        rgba(255, 255, 255, 0.12) 0,
        rgba(255, 255, 255, 0.08) 50%,
        rgba(255, 255, 255, 0.05) 50%,
        rgba(255, 255, 255, 0) 100%
      );
    background-position: 50% 50%;
    color: #eeeeee;
    border-right: 1px solid #444444;
  }
  .k-table th {
    border-bottom: 1px solid #444444;
  }
  .k-table-row-highlight td,
  tr.k-table-row-highlight.k-table-row-hover td {
    background-color: #555;
  }

  .feature-table-page {
    margin: 3px;
    color: #ffffff;
    .k-page.mini .k-page-prev,
    .k-page.mini .k-page-next,
    .k-page.mini .k-page-item {
      min-width: 22px;
      height: 22px;
    }
  }

  .k-spin-fix {
    background-color: rgba(255, 255, 255, 0.4);
  }
}
</style>
